<template>
  <el-row>
    <el-col :span="15">
      <div class="left">
        <div class="register">
          <em><i class="iconfont icon-shipin-shengxian-yu" />沛丰生鲜</em>
          <hr align="left" width="10%" size="2" color="#fff" />
          <h2>ADMINISTRATION</h2>
          <h3>SYSTEM</h3>
          <el-button type="primary" plain>注册</el-button>
        </div>
      </div>
    </el-col>
    <el-col :span="9">
      <div class="right">
        <div class="from">
          <h3>后台管理系统</h3>
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <table>
              <tr>
                <td colspan="2">
                  <el-form-item label-width="0" prop="user">
                    <el-input
                      type="text"
                      prefix-icon="iconfont icon-yonghu"
                      v-model="ruleForm.user"
                      autocomplete="off"
                      placeholder="请输入用户名"
                    />
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <el-form-item label-width="0" prop="pwd">
                    <el-input
                      type="password"
                      prefix-icon="iconfont icon-suo"
                      v-model="ruleForm.pwd"
                      autocomplete="off"
                      placeholder="请输入密码"
                      show-password
                    />
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="code">
                  <el-form-item label-width="0" prop="code">
                    <el-input
                      type="text"
                      prefix-icon="iconfont icon-yanzhengma"
                      v-model="ruleForm.code"
                      autocomplete="off"
                      placeholder="请输入验证码"
                    />
                  </el-form-item>
                </td>
                <td class="codeNumber">
                  <i>{{ number }}</i>
                  <button type="button" @click="rdnumber">换一个</button>
                </td>
              </tr>
              <tr>
                <td>
                  <el-checkbox v-model="ruleForm.checked">记住密码</el-checkbox>
                  <a href="#">忘记密码</a>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <el-button
                    type="primary"
                    :loading="loaShow"
                    @click="submitForm('ruleForm')"
                    >提交</el-button
                  >
                </td>
              </tr>
              <tr>
                <td colspan="2" class="icon">
                  <i class="iconfont icon-weixin" /><strong>微信登陆</strong>
                  <i class="iconfont icon-qq" /><strong>QQ登陆</strong>
                  <i class="iconfont icon-weibo" /><strong>新浪微博登陆</strong>
                </td>
              </tr>
            </table>
          </el-form>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { requser } from "@/api/user";
import { setToken } from "@/utils/storage";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Login",
  data() {
    var checkCode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("验证码不能为空"));
      }
      setTimeout(() => {
        if (value === "") {
          callback(new Error("请输入密码"));
        } else {
          if (value < 4) {
            callback(new Error("请输入正确验证码"));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    var validateUser = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      } else {
        callback();
      }
    };
    var validatePwd = (rule, value, callback) => {
      //正则校验
      //rule = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,20}$/;
      rule = /^.{3,18}$/;
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (!rule.test(value)) {
        callback(new Error("密码格式不正确"));
      } else {
        callback();
      }
    };
    return {
      loaShow: false,
      ruleForm: {
        user: "",
        pwd: "",
        code: "",
        checked: false,
      },
      rules: {
        user: [{ validator: validateUser, trigger: "blur" }],
        pwd: [{ validator: validatePwd, trigger: "blur" }],
        code: [{ validator: checkCode, trigger: "blur" }],
      },
    };
  },
  components: {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.loaShow = true;
          // eslint-disable-next-line no-unused-vars
          const { user, pwd, code, checked } = this.ruleForm;
          //const res = await requser(`"${user}"`, `"${pwd}"`); //字符串形式
          const res = await requser(user, pwd);
          console.log(res.data.status);
          setTimeout(() => {
            if (res.data.status === 200) {
              //localStorage.setItem("token", res.data.token);
              setToken("token", res.data.token); //将token保存到本地
              this.loaShow = false;
              this.$message({
                message: res.data.message,
                type: "success",
              });
              this.$router.push("/");
            } else if (res.data.status !== 200) {
              this.loaShow = false;
              this.$message.error(res.data.msg);
            }
          }, 1000);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //生成随机数
    rdnumber() {
      this.number = Math.floor(1000 + Math.random() * 9000);
    },
  },
  mounted() {
    this.rdnumber();
  },
  created() {},
};
</script>

<style lang="less" scoped>
@coloricon: #a5a5a2;
.left {
  width: 100%;
  height: 100vh;
  background: url("../../assets/images/bg.jpg") no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  .register {
    width: 67%;
    height: auto;
    em {
      display: flex;
      justify-content: start;
      align-items: center;
      margin-bottom: 30px;
      i {
        font-size: 26px;
        color: #489bf9;
      }
    }
    h2 {
      color: #fff;
      font-size: 65px;
    }
    h3 {
      color: #4b90e4;
      font-size: 60px;
    }
    button {
      margin-left: 50%;
      transform: translate(-50%);
      margin-top: 60px;
      width: 20%;
    }
  }
}
.right {
  width: 100%;
  height: 100vh;
  background-color: #4b90e4;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  .from {
    width: 65%;
    height: auto;
    h3 {
      font-size: 28px;
      color: #fff;
      margin-bottom: 36px;
    }
    table {
      width: 100%;
      height: 100%;
      tr {
        td {
          position: relative;
          /deep/.el-input__inner {
            border-radius: 25px;
            padding-left: 40px;
            height: 50px;
          }
          /deep/.el-input__prefix {
            left: 22px;
          }
          .el-button {
            margin-top: 30px;
            margin-bottom: 50px;
            width: 100%;
            border-radius: 20px;
            border: 1px solid #fff;
            font-size: 18px;
            color: #fff;
          }
        }
        .code {
          width: 50%;
        }
        /deep/.el-checkbox__label {
          color: #fff;
        }
        .codeNumber {
          height: 50px;
          display: flex;
          align-items: center;
          margin-left: 10px;
          i {
            font-size: 22px;
          }
          button {
            background-color: #4b90e4;
            border: none;
            color: #fff;
            margin-left: 20px;
          }
        }
        a {
          font-size: 14px;
          margin-left: 15px;
        }
        .icon {
          width: 200%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          strong {
            width: 20%;
            color: #fff;
            font-size: 12px;
          }
          i {
            margin-right: 5px;
            background-color: #fff;
            font-size: 20px;
            color: #489bf9;
            text-align: center;
            line-height: 30px;
            display: inline-block;
            width: 30px;
            height: 30px;
            border-radius: 20px;
          }
        }
      }
    }
  }
}
</style>
